<template>
  <!-- 双向图 bidirectionalDiagram -->
  <div
    style="
      width: 530px;
      height: 380px;
      margin-left: 20px;
      transform: translateY(-40px);
    "
    ref="bidirectionalDiagramDOM"
  ></div>
</template>


<script setup lang="ts">
import { ref, onMounted, toRef, watch } from "vue";
import * as echarts from "echarts";
import { useBusinessStore } from "/@/store/index.ts";
const businessStore = useBusinessStore();

let businessList = ref([]);
let nameList = ref([]);
let dataList = ref([]);
let timeText = ref("");

businessStore.$subscribe((mutation, state) => {
  businessList.value = state.business_data;
  // businessList.value.reverse();
  if (businessList.value.length > 0) {
    nameList.value = [];
    dataList.value = [];
    businessList.value.forEach((item: any) => {
      if (item.name.length > 6) {
        nameList.value.push(item.name.slice(0, 6) + "...");
      } else {
        nameList.value.push(item.name);
      }
      dataList.value.push(item.percent);
    });
  }
  initMap();
});
const initMonth = () => {
  let date = new Date();
  return date.getFullYear() + "年" + date.getMonth() + "月";
};
timeText.value = initMonth();

const bidirectionalDiagramDOM = ref();

var myChart = null;
async function initMap() {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(bidirectionalDiagramDOM.value);
  var spNum = 5;
  var _max = 100;
  // var legendData = ["10月前", "11月", "12月"];

  var y_data = nameList;
  var _datamax = [100, 100, 100, 100, 100, 100, 100, 100];
  // _data1 = dataList,
  // _data2 = [19, 25, 40, 33, 15, 51, 27, 40],
  // _data3 = [21, 35, 30, 13, 35, 11, 19, 23];
  var fomatter_fn = function (v) {
    return ((v.value / _max) * 100).toFixed(2) + "%";
  };
  var _label = {
    normal: {
      show: true,
      position: "outside",
      formatter: fomatter_fn,
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },
  };
  var option = {
    // backgroundColor: "#051338",
    grid: {
      containLabel: true,
      left: 0,
      right: 15,
      bottom: 30,
    },
    // 触摸显示的
    tooltip: {
      show: true,
      backgroundColor: "#fff",
      borderColor: "#ddd",
      borderWidth: 1,
      textStyle: {
        color: "#3c3c3c",
        fontSize: 16,
      },
      formatter: function (p) {
        let index = dataList.value.indexOf(p.value);
        return (
          p.seriesName +
          "<br>" +
          "金额：" +
          (businessList.value[index].sum_price > 0 ? businessList.value[index].sum_price : 0.00) +
          "元" +
          "<br>" +
          "占比：" +
          p.value +
          "%"
        );
      },
      extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)",
    },
    xAxis: {
      splitNumber: spNum,
      interval: _max / spNum,
      max: _max,
      axisLabel: {
        show: false,
        formatter: function (v) {
          var _v = ((v / _max) * 100).toFixed(0);
          return _v == 0 ? _v : _v + "%";
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        data: nameList.value,
        axisLabel: {
          fontSize: 16,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        show: false,
        data: y_data,
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "bar",
        silent: true,
        yAxisIndex: 1,
        barGap: 10, // 设置柱状图之间的间距
        itemStyle: {
          normal: {
            color: "rgba(255,255,255,0.1)", // 柱状的背景
          },
          emphasis: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        data: _datamax,
      },
      {
        type: "bar",
        name: timeText.value,
        stack: "2",
        label: _label,
        legendHoverLink: false,
        barWidth: 20,
        barGap: 50, // 设置柱状图之间的间距
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#9C58F6", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#6866F0", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          emphasis: {
            color: "#9C58F6",
          },
        },
        data: dataList.value,
      },
      // {
      //   type: "bar",
      //   name: "11月",
      //   stack: "2",
      //   legendHoverLink: false,
      //   barWidth: 50,
      //   barGap: 20, // 设置柱状图之间的间距
      //   label: _label,
      //   itemStyle: {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 1,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0,
      //             color: "#3AB9F8", // 0% 处的颜色
      //           },
      //           {
      //             offset: 1,
      //             color: "#606EF2", // 100% 处的颜色
      //           },
      //         ],
      //         global: false, // 缺省为 false
      //       },
      //     },
      //     emphasis: {
      //       color: "#3BB6F8",
      //     },
      //   },
      //   data: _data2,
      // },
      // {
      //   type: "bar",
      //   stack: "2",
      //   name: "12月",
      //   legendHoverLink: false,
      //   barWidth: 20,
      //   barGap: 50, // 设置柱状图之间的间距
      //   label: _label,
      //   itemStyle: {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 1,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0,
      //             color: "#65FDF0", // 0% 处的颜色
      //           },
      //           {
      //             offset: 1,
      //             color: "#2986AF", // 100% 处的颜色
      //           },
      //         ],
      //         global: false, // 缺省为 false
      //       },
      //     },
      //     emphasis: {
      //       color: "#61F5EC",
      //     },
      //   },
      //   data: _data3,
      // },
    ],
  };

  myChart.setOption(option);
}

onMounted(async () => {
  // await initMap();
});
</script>